<template>
  <div
    class="body"
    :style="{
      width:
        this.screenWidth > 2558
          ? '1921px'
          : this.screenWidth > 1266
          ? '100%'
          : '1266px',
    }"
  >
    <!-- 顶部导航栏 -->
    <div class="head">
      <div class="logo"><img class="img" src="../assets/home/y.png" /></div>
      <div class="border"></div>
      <div class="tab-box">
        <div
          v-for="(item, index) in tabList"
          class="tab"
          :key="index"
          @click="tabChange(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <!-- 轮播图部分 -->
    <div
      id="carousel-box"
      class="carousel-box"
      :style="{
        height: this.screenHeight > 1080 ? '1080px' : this.screenHeight + 'px',
      }"
    >
      <transition-group name="carousel" tag="ul">
        <li v-for="curImg in currImgs" :key="curImg.id">
          <img :src="curImg.picture" class="item" />
        </li>
      </transition-group>
      <div class="carousel-btn">
        <div class="prev btn" @click="prev">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="next btn" @click="next">
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="page-box">
          <div
            v-for="(item, index) in imgs"
            :key="index"
            class="page"
            @click="Switch(index)"
            :class="tabIndex === index ? 'bgc-active' : ''"
          >
            0{{ index + 1 }}
          </div>
        </div>
      </div>
    </div>
    <div
      :style="{
        height:
          this.screenHeight > 1084
            ? '900px'
            : this.screenHeight > 716
            ? this.screenHeight - 578 + 450 + 'px'
            : '500px',
      }"
    ></div>
    <!-- 上贤介绍 -->
    <div class="info">
      <div class="info_box" v-for="(item, key) in infoList" :key="key">
        <img :src="item.picture" alt="" />
      </div>
    </div>

    <!-- 聚贤时光 -->
    <div class="time_box">
      <div class="title">聚贤时光</div>
      <div class="main"><img :src="imgs[1].picture" alt="" /></div>
      <div class="next_pic">
        <div><img :src="imgs[2].picture" alt="" /></div>
      </div>
      <div class="text">
        <div class="text_title">大手笔的辣会计师</div>
        <div class="content">
          大大网宿科大大网宿科技戴纳肯了解对你大数据看了你的健康了三联单按时来得快马上了大大网宿科技戴纳肯了解对你大数据看了你的健康了三联单按时来得快马上了大大网宿科技戴纳肯了解对你大数据看了你的健康了三联单按时来得快马上了大大网宿科技戴纳肯了解对你大数据看了你的健康了三联单按时来得快马上了v技戴纳肯了解对你大数据看了你的健康了三联单按时来得快马上了
        </div>
      </div>
    </div>

<!-- 数据展示 -->
<div class="data_display">
  <div class="title">
    上贤概况数据展示
  </div>
  <div class="content">
<img :src="logo" alt="">
  </div>
</div>

<!-- 所获奖项 -->
<div class="prize">
  <div class="picture">
    <div class="items" v-for="(item,index) in infoList" :key="index"><img :src="item.picture" alt=""></div>
  </div>
  <div class="prize_border"></div>
</div>


    <!-- 底部栏 -->
    <div class="foot">
      <div class="foot-logo">
        <img class="img" src="../assets/home/y.png" />
      </div>
      <div class="foot-info">
        <div class="group">qq群：{{ group }}</div>
        <div class="group">地址：{{ address }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      logo: "../assets/home/y.png",
      tabList: [
        "主页",
        "上贤简介",
        "软研方向",
        "科研方向",
        "团队现状",
        "所获奖项",
        "聚贤时光(社区)",
      ],
      currImgs: [],
      imgs:[],
      // imgs: [
      //   {
      //     url:
      //       "https://img11.360buyimg.com/da/jfs/t4000/107/2234194410/85271/6c24d985/58a50cafNb60886c9.jpg",
      //     id: 0,
      //   },
      //   {
      //     url:
      //       "https://img20.360buyimg.com/da/jfs/t3154/175/5917485830/129679/f123634c/5897e6a2N83837dd2.jpg",
      //     id: 1,
      //   },
      //   {
      //     url:
      //       "https://img1.360buyimg.com/da/jfs/t3133/89/5984232745/66970/beaf615c/589ac9bcNe544a72e.jpg",
      //     id: 2,
      //   },
      //   {
      //     url:
      //       "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
      //     id: 3,
      //   },
      // ],
      tabIndex: 0,
      timer: null,
      group: 84644212,
      address: "大家微博的哈帮我打哈萨科技的那颗近三年内打开",
      screenWidth: document.body.clientWidth,
      screenHeight: document.documentElement.clientHeight,
      infoList:[],
      // infoList: [
      //   {
      //     url:
      //       "https://img20.360buyimg.com/da/jfs/t3154/175/5917485830/129679/f123634c/5897e6a2N83837dd2.jpg",
      //     id: 1,
      //   },
      //   {
      //     url:
      //       "https://img1.360buyimg.com/da/jfs/t3133/89/5984232745/66970/beaf615c/589ac9bcNe544a72e.jpg",
      //     id: 2,
      //   },
      //   {
      //     url:
      //       "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
      //     id: 3,
      //   },
      // ],
    };
  },
  mounted: function () {
    this.currImgs = [this.imgs[0]];
    this.startChange();
    const that = this;
    // this.screenWidth=document.body.clientWidth;
    // 使用window.onresize方法,然后就可以持续监听浏览器放大缩小了
    window.onresize = () => {
      return (() => {
        that.screenWidth = document.body.clientWidth;
        // that.screenHeight= document.body.clientHeight;获取不了
        that.screenHeight = document.documentElement.clientHeight;
      })();
    };
  },
  async created(){
    const {data:res1} = await this.$http('home_page/getCarousel');
    const {data:res2} = await this.$http('jx_hotview/getCarousel');
    
    if(res1.code===200){
      this.imgs=res1.data.list;
    console.log(this.imgs[1].picture);
    }

     if(res2.code===200){
      this.infoList=res2.data.list;
    console.log(this.infoList[1].picture);
    }
  },
  watch: {
    screenWidth: {
      immediate: true,
      handler: function (newVal) {
        // console.log(newVal);
        // console.log(this.screenWidth);
      },
    },
    screenHeight: {
      immediate: true,
      handler: function (newVal) {
        // console.log(newVal);
        // console.log(this.screenHeight);
      },
    },
  },
  computed: {
    len() {
      return this.imgs.length;
    },
  },
  methods: {
    // 切换图片
    changeImg: function (e) {
      this.currImgs.splice(0, 1, this.imgs[e]);
    },
    // 开始定时器
    startChange: function () {
      var _this = this;
      this.timer = setInterval(function () {
        _this.tabIndex++;
        if (_this.tabIndex > _this.len - 1) _this.tabIndex = 0;
        _this.changeImg(_this.tabIndex);
      }, 4000);
    },
    // 点击页数切换
    Switch: function (e) {
      this.tabIndex = e;
      this.changeImg(e);
      if (this.timer) clearInterval(this.timer);
      this.startChange();
    },
    // 向前页
    prev: function () {
      this.tabIndex--;
      if (this.tabIndex < 0) this.tabIndex = this.len - 1;
      this.changeImg(this.tabIndex);
      if (this.timer) clearInterval(this.timer);
      this.startChange();
    },
    // 向后页
    next: function () {
      this.tabIndex++;
      if (this.tabIndex > this.len - 1) this.tabIndex = 0;
      this.changeImg(this.tabIndex);
      if (this.timer) clearInterval(this.timer);
      this.startChange();
      console.log(this.screenHeight);
    },
    tabChange: async function (e) {
      switch (e) {
        case 0:
          console.log(e);
          this.$router.push("/Home");
          const { data: res } = await this.$http.get("json.action");
          console.log(res);
          break;
        case 1:
          console.log(e);
          this.$router.push("/About");
          break;
        case 2:
          console.log(e);
          this.$router.push("/Software");
          break;
        case 3:
          console.log(e);
          this.$router.push("/Science");
          break;
        case 4:
          console.log(e);
          this.$router.push("/TeamStatus");
          break;
        case 5:
          console.log(e);
          this.$router.push("/Awards");
          break;
        case 6:
          console.log(e);
          this.$router.push("/Community");
          break;
        default:
          break;
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.body {
  // width: 1921px;
  // height: 100vh;
  background: #f7f7f7;
  position: relative;
  margin: 0 auto;
  .img {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  // 顶部导航
  .head {
    width: 100%;
    height: 130px;
    position: relative;
    margin-bottom: 20px;
    z-index: 1;
    .logo {
      width: 228px;
      height: 72px;
      position: absolute;
      left: 81px;
      bottom: 0;
    }
    .border {
      height: 2px;
      width: 248px;
      position: absolute;
      right: 35px;
      top: 66px;
      background: #e3e3e3;
    }
    .tab-box {
      height: 35px;
      width: 800px;
      position: absolute;
      bottom: 0;
      right: 35px;
      // background: black;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tab {
        width: 90px;
        height: 100%;
        // border: 1px solid #e3e3e3;
        // box-shadow: 0 0 5px #dbdbdb;
        color: #fff;
        text-align: center;
        line-height: 35px;
        cursor: pointer;
        // font-weight: bold;
        font-family: PingFang SC;
      }
      .tab:hover {
        color: #797979;
        background-color: #fff;
        border-top: solid #f24646 2px;
      }
      :last-child {
        width: 140px;
      }
    }
  }
  // 轮播图部分
  .carousel-box {
    position: absolute;
    width: 100%;
    // height: 100%;
    top: 0;
    left: 0;
    .carousel-enter-active,
    .carousel-leave-active {
      transition: all 1s;
    }
    .carousel-enter,
    .carousel-leave-to {
      opacity: 0;
    }
    li {
      position: absolute;
      width: 100%;
      height: 100%;
      .item {
        width: 100%;
        // height: 100%;
      }
    }
    .carousel-btn {
      position: relative;
      height: 100%;
      .btn {
        position: absolute;
        top: 50%;
        width: 72px;
        height: 72px;
        text-align: center;
        line-height: 72px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid #818181;
        background-color: #242c34;
        font-size: 40px;
        color: #c6c6c6;
        opacity: 0.7;
      }
      .btn:hover {
        opacity: 0.5;
        cursor: pointer;
      }
      .prev {
        left: 40px;
      }
      .next {
        right: 40px;
      }
      .page-box {
        position: absolute;
        width: 400px;
        height: 50px;
        left: 90px;
        top: 65%;
        display: flex;
        .page {
          height: 100%;
          width: 35px;
          text-align: center;
          line-height: 50px;
          margin-right: 20px;
          color: #fff;
        }
        .page:hover {
          cursor: pointer;
        }
        .bgc-active {
          background-color: #9f8027;
        }
      }
    }
  }

  .info {
    width: 1400px;
    display: flex;
    margin: 0 auto;
    .info_box {
      flex: 1;
      height: 326px;
      // width: 356px;
      img {
        width: 100%;
      }
    }
  }

  .time_box {
    width: 1400px;
    margin: 0 auto;
    height: 666px;
    position: relative;
    text-align: center;
    .title {
      position: absolute;
      padding: 25px;
      width: 50px;
      height: 200px;
      // background: green;
      font-size: 28px;
      color: green;
      border: solid black 1px;
    }
    .main {
      position: absolute;
      width: 860px;
      height: 530px;
      left: 180px;
      background: red;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .next_pic {
      position: absolute;
      width: 297px;
      height: 297px;
      left: 1000px;
      top: 100px;
      transform: rotate(45deg);
      background: green;
      overflow: hidden;
      div {
        position: relative;
        transform: rotate(-45deg);
        img {
          position: absolute;
          top: -150px;
          left: -180px;
          width: 500px;
          height: 500px;
        }
      }
    }
    .text {
      position: absolute;
      width: 700px;
      height: 150px;
      bottom: 50px;
      left: 180px;
      background: pink;
      .text_title {
        font-size: 22px;
        margin: 12px;
      }
      .content {
        font-size: 15px;
        margin: 10px 50px;
        height: 60px;
        // white-space: nowrap;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow-wrap: break-word;
        color: #2e2e2e;
      }
    }
  }

  .data_display{
    margin: 0 auto;
    width: 1200px;
    .title{
      width: 300px;
      height: 50px;
      margin: 50px auto;
      text-align: center;
      line-height: 50px;
      border: solid black 1px;
    }
    .content{
      width: 100%;
      height: 400px;
      margin: 50px 0;
      // padding: 50px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }

.prize{
  width: 1400px;
  display: flex;
  margin:  200px  auto 100px;
  justify-content: space-between;
  .picture{
    width: 1000px;
    display: flex;
    justify-content: space-between;
    .items{
      width: 300px;
      height: 250px;
      background: black;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .prize_border{
    height: 250px;
    width: 330px;
    border-left: solid #818181 1px;
  }

}


  .foot {
    width: 100%;
    height: 200px;
    border-top: solid #818181 2px;
    display: flex;
    .foot-logo {
      margin: 50px 70px 0 70px;
      width: 228px;
      height: 72px;
      // background-color: red;
      // border: solid #818181 1px;
    }
    .foot-info {
      margin-top: 50px;
      width: 528px;
      height: 72px;
      // background-color: red;
      // border: solid #818181 1px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .group {
        height: 26px;
        padding-left: 20px;
        line-height: 26px;
        font-size: 15px;
      }
    }
  }
}
</style>
